<template>
  <section class="page-container">
    <section class="page-container__left">
      <HiCard
        title="设备总览"
        class="card-content__left"
      >
        <LeftTopCard />
      </HiCard>
      <HiCard
        title="用户总览"
        class="card-content__left"
      >
        自己开发实现具体内容
      </HiCard>
      <HiCard
        title="设备提醒"
        class="card-content__left"
      >
        自己开发实现具体内容
      </HiCard>
    </section>
    <section class="page-container__center">
      <CenterMap />
      <HiCard
        title="安装计划"
        class="card-content__center bottom"
        :width="784"
        :height="315"
      >
        自己开发实现具体内容
      </HiCard>
    </section>
    <section class="page-container__right">
      <HiCard
        title="报警次数"
        class="card-content__right"
      >
        <RightTopCard />
      </HiCard>
      <HiCard
        title="报警排名(TOP8)"
        class="card-content__right"
      >
        自己开发实现具体内容
      </HiCard>
      <HiCard
        title="数据统计图"
        class="card-content__right"
      >
        自己开发实现具体内容
      </HiCard>
    </section>
  </section>
</template>

<script setup lang="ts" name="HomeIndex">
import { onMounted } from 'vue';

import HiCard from './components/card.vue';
import CenterMap from './components/center-map.vue';
import LeftTopCard from './components/left-top-card.vue';
import RightTopCard from './components/right-top-card.vue';

import { showLoading, hideLoading } from '@/utils/loading';

onMounted(() => {
  showLoading();
  setTimeout(() => {
    hideLoading();
  }, 500);
});
</script>

<style lang="scss" scoped>
.page-container {
  @include flex-box;

  .page-container__left,
  .page-container__center,
  .page-container__right {
    position: relative;
    height: 100%;

    @include flex-box(space-around, center, column, nowrap);
  }

  .card-content__left,
  .card-content__right {
    height: 310px;
  }

  .card-content__center {
    height: 315px;
  }

  .page-container__left {
    width: 540px;
  }

  .page-container__center {
    width: 784px;
  }

  .page-container__right {
    width: 540px;
  }
}
</style>
